<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .on {
            color: red;
        }

        .a{
            background-color: #ff0;
        }
    </style>
</head>
<body>

    <div id="a" class="a">12</div>

    <script>

        var oDiv = document.querySelector('div') ;

        // class 是关键字   className
        // console.log(oDiv.className) ;


        oDiv.onclick = function() {
            // if(this.getAttribute('class') === 'on') {
            //     this.removeAttribute('class') ;
            // }
            // else {
            //     this.setAttribute('class' , 'on') ;
            // }

            // if(this.className === 'on') {
            //     this.className = '' ;
            // } 
            // else {
            //     this.className = 'on'
            // }


            // className是字符串   所以需要判断字符串是否存在
            if(this.className.includes(' on')) {
                // this.className = 'a' ;
                // 把字符串 on 替换成空  相当于删除
                this.className = this.className.replace(' on' , '') ;
            } 
            else {
                // 添加类名注意加空格
                this.className += ' on'
            }
        }



    </script>
    
</body>
</html>